<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>02-使用方法(事件)拼接名字</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../VueJs/vue.js"></script>
    <style>
        .tips {
            width: 300px;
            padding: 20px;
            line-height: 32px;
            font-size: 26px;
        }
    </style>
    <!-- 
        总结
            a. 在风格化指南中，要求表达式要尽可能的简洁，如果比较复杂应该使用函数去操作
            b. methods 中声明的函数，可以在页面中加括号直接调用
            c. methods 中声明的函数，如果要使用data中的数据，一定要加this
            d. methods 中返回的数据，会直接写入到页面的插值表达式中
     -->
</head>
<body>
    <div id="demo">
        <div class="container">
            <h3>拼接姓名</h3>

            <hr>
            <form action="#" class="form-inline">

                <p class="from-group">
                    <label>
                        <span>姓氏：</span>
                        <input type="text" class="form-control" v-model="firName">
                    </label>
                </p>
                <p class="from-group">
                    <label>
                        <span>名字：</span>
                        <input type="text" class="form-control" v-model="lastName">
                    </label>
                </p>
            </form>

            <!-- 调用methods中的方法，写入插值表达式，会把返回值输出在页面中 -->
            <p class="bg-success tips">{{ fullName() }}</p>
            <!-- <p class="bg-success tips">{{ fullName() }}</p>
            <p class="bg-success tips">{{ fullName() }}</p> -->
        </div>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        const vm = new Vue({
            el: '#demo',
            data: {
                firName: '',
                lastName: ''
            },
            // methods 专门存放一些事件和方法函数
            methods: {
                fullName() {
                    console.log(111)
                    // 在函数中，如何使用data中的数据
                    // this 指向 vm
                    // console.log(this.firName)

                    let s1 = this.firName && this.firName[0].toUpperCase() + this.firName.slice(1)
                    let s2 = this.lastName && this.lastName[0].toUpperCase() + this.lastName.slice(1)
                    // 在页面中调用函数，通过返回值给dom填充内容
                    return s1 + ' - ' + s2
                }
            }
        })

        // console.log(vm)
    </script>
</body>
</html>